<template>
  <div id="buy">
    <div class="container">
      <div class="container-header">
        <!-- 面包屑导航和搜索框 -->
        <el-row class="breadcrumb">
          <Breadcrumb cur-local-name="二手车出售" />
          <el-col
            :span="9"
            class="breadcrumb-right">
            <el-input
              v-model="fullName"
              size="small"
              class="search-input"
              placeholder="请输入感兴趣的品牌、车系">
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="fullNameSearch" />
            </el-input>
          </el-col>
        </el-row>
        <el-row class="search-filter">
          <el-col class="filter">
            <p>品牌：</p>
            <ul
              ref="firstFilterCarBrand"
              class="filter-carBrand"
              @click="selectCarBrand($event)">
              <li
                v-for="(value, key, index) in carBrandListObj"
                :key="index">
                <div class="first-letter"
                     :data-letter="key"
                     :class="{'cur': selectCondition.curFirstLetter == key}">
                  {{ key }}
                </div>
                <div 
                  v-if="selectCondition.curFirstLetter == key"
                  ref="firstLetterList"
                  class="first-letter-list">
                  <span
                    v-for="(item, i) in value" 
                    :key="i"
                    :data-index="i"
                    :data-id="item.id"
                    :class="{'cur': selectCondition.curCarBrand == i}">{{ item.name }}</span>
                </div>
              </li>
            </ul>
          </el-col>
          <el-col class="filter">
            <p>车系：</p>
            <ul
              class="filter-carBrand"
              @click="selectCarSystem($event)">
              <li :class="{'cur': selectCondition.curCarSystem == -1}"
                  @click="selectCondition.curCarSystem=-1">
                不限
              </li>
              <li
                v-for="(item,index) of CarSeriesList"
                :key="index"
                :data-index="index"
                :data-id="item.id"
                :class="{'cur': selectCondition.curCarSystem == index}">
                {{ item.name }}
              </li>
            </ul>
          </el-col>
          <el-col class="filter">
            <p>价格：</p>
            <ul
              class="filter-carBrand"
              @click="selectCarPrice($event)">
              <li
                v-for="(item,index) of priceList"
                :key="index"
                :data-index="index"
                :data-minPrice="item.minPrice"
                :data-maxPrice="item.maxPrice"
                :class="{'cur': selectCondition.curCarPrice == index}">
                {{ item.text }}
              </li>
            </ul>
          </el-col>
        </el-row>
      </div>
      <div class="container-body">
        <el-row class="list-sort">
          <el-col
            v-for="(item,index) in anotherSortList"
            :key="index"
            :span="2.5">
            <div class="list-item"
                 :class="{'cur': selectCondition.curSort === index}"
                 @click="selectAnotherSort(item,index)">
              {{ item.text }}
            </div>
          </el-col>
        </el-row>
        <el-row
          v-if="carList.length"
          tag="ul"
          class="list-body">
          <el-col
            v-for="(item,index) in carList"
            :key="index"
            tag="li"
            :span="6"
            class="list">
            <div
              class="list-item"
              @click="$router.push({path:'/buyCar/buyDetail', query:{id:item.id}})">
              <img :key="item.image"
                   v-lazy="item.image">
              <h2 class="t">
                {{ item.fullName }}
              </h2>
              <div class="t-i">
                {{ item.year }}<span class="icon-pad">|</span>{{ item.kilo }}万公里<span class="icon-pad">|</span>店内直卖
              </div>
              <div class="t-price">
                <p>{{ item.ownerPrice }}<span>万</span></p>
                <i class="i-orange">超值</i>
                <i class="i-green">准新车</i>
                <i class="i-blue">严选车</i>
                <em class="line-through">{{ item.newCarPrice }}万</em>
              </div>
            </div>
          </el-col>
          <el-col class="container-footer">
            <el-pagination
              background
              layout="prev, pager, next"
              :page-size="20"
              :total="total"
              @current-change="changePageIndex" />
          </el-col>
        </el-row>
        <el-row v-else
                class="no-list">
          <p>没有你想要的爱车</p>
          <span>请搜索其他品牌车</span>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
  import { getAllCarBrandList, getCarSeriesList } from '@/api/carcategory';
  import { getSearchCarList } from '@/api/caroperation';
  import Breadcrumb from '@/components/Breadcrumb.vue';

  export default {
    name: 'buy',
    components: {
      Breadcrumb,
    },
    data() {
      return {
        carBrandListObj: {
          不限: [],
        },
        CarSeriesList: [],
        priceList: [
          {
            text: '不限',
            minPrice: 0,
            maxPrice: 0,
          },
          {
            text: '3万以下',
            minPrice: 0,
            maxPrice: 3,
          },
          {
            text: '3-6万',
            minPrice: 3,
            maxPrice: 6,
          },
          {
            text: '6-10万',
            minPrice: 6,
            maxPrice: 10,
          },
          {
            text: '10-20万',
            minPrice: 10,
            maxPrice: 20,
          },
          {
            text: '20-30万',
            minPrice: 20,
            maxPrice: 30,
          },
          {
            text: '30万以上',
            minPrice: 30,
            maxPrice: 999,
          },
        ],
        anotherSortList: [
          {
            text: '麻花二手车',
            columnState: 1001,
            sortState: 102,
          },
          {
            text: '价格最高',
            columnState: 1003,
            sortState: 101,
          },
          {
            text: '价格最低',
            columnState: 1003,
            sortState: 102,
          },
          {
            text: '里程最短',
            columnState: 1002,
            sortState: 102,
          },
          {
            text: '车龄最短',
            columnState: 1001,
            sortState: 102,
          },
        ],
        // 控制筛选车品牌、车系、价格样式
        selectCondition: {
          curFirstLetter: 'A',
          curCarBrand: -1,
          saveCarBrand: { first: '', name: '' }, // 保存所选的车品牌
          curCarSystem: -1,
          curCarPrice: 0,
          curSort: 0, // 筛选详情页
        },
        // 查询条件
        searchObj: {
          pageIndex: 1, // 页数
          pageSize: 20, // 每页的条数
          columnState: 1001, // 排序的列
          sortState: 102, // 升序或者降序的值
          carStr: {
            fullName: '',
            brandName: '',
            seriesName: '',
            minPrice: '',
            maxPrice: '',
          },
        },
        fullName: '',
        carList: [],
        total: 0,
      };
    },
    watch: {
      searchObj: {
        handler() {
          this.getSearchCarList();
        },
        immediate: true,
        deep: true,
      },
    },
    mounted() {
      getAllCarBrandList().then(data => {
        if (data.success) {
          Object.assign(this.carBrandListObj, data.cbMap);
        } else {
          this.$message.error('获取车品牌列表失败');
        }
      });
    },
    activated() {
      if (this.$route.query.brandId) {
        const { brandName, brandId } = this.$route.query;
        this.searchObj.carStr.brandName = brandName;
        getCarSeriesList({ brandId }).then(data => {
          this.CarSeriesList = data.csList;
        });
      } else if (this.$route.query.fullName) {
        const { fullName } = this.$route.query;
        this.searchObj.carStr.fullName = fullName;
      }
    },
    methods: {
      // 选择车品牌查询
      selectCarBrand(e) {
        const event = e.target;
        const select = this.selectCondition;
        // 选择首字母
        if (event.nodeName.toLowerCase() === 'div') {
          select.curFirstLetter = event.getAttribute('data-letter');
          select.curCarBrand = (select.saveCarBrand.first === select.curFirstLetter) ? select.saveCarBrand.name : -1;
          if (select.curFirstLetter === '不限') {
            this.searchObj.carStr.fullName = '';
            this.CarSeriesList = [];
            this.resetSearchObj();
          }
          this.$nextTick(() => {
            this.$refs.firstFilterCarBrand.style.height = `${60 + this.$refs.firstLetterList[0].clientHeight}px`;
          });
        } else if (event.nodeName.toLowerCase() === 'span') {
          // 选择车品牌
          select.curCarBrand = event.getAttribute('data-index');
          select.saveCarBrand.first = select.curFirstLetter;
          select.saveCarBrand.name = select.curCarBrand;
          const brandId = event.getAttribute('data-id');
          // 获取品牌对应车系
          getCarSeriesList({ brandId }).then(data => {
            this.CarSeriesList = data.csList;
          });
          // 重置查询条件
          this.resetSearchObj();
          this.searchObj.carStr.brandName = event.innerHTML;
        }
      },
      // 选择车系查询
      selectCarSystem(e) {
        const event = e.target;
        this.selectCondition.curCarSystem = event.getAttribute('data-index') || -1;
        this.searchObj.carStr.seriesName = event.innerHTML.trim();
        this.searchObj.pageIndex = 1;
        if (this.selectCondition.curCarSystem == -1) {
          this.searchObj.carStr.seriesName = '';
        }
      },
      // 选择车价格查询
      selectCarPrice(e) {
        const event = e.target;
        this.selectCondition.curCarPrice = event.getAttribute('data-index');
        this.searchObj.carStr.minPrice = event.getAttribute('data-minPrice');
        this.searchObj.carStr.maxPrice = event.getAttribute('data-maxPrice');
        this.searchObj.pageIndex = 1;
      },
      // 选择其他条件排序
      selectAnotherSort(item, index) {
        this.selectCondition.curSort = index;
        this.searchObj.columnState = item.columnState;
        this.searchObj.sortState = item.sortState;
        this.searchObj.pageIndex = 1;
      },
      // 条件查询车辆列表
      getSearchCarList() {
        const { searchObj } = this;
        getSearchCarList(searchObj).then(data => {
          if (data.success) {
            this.carList = data.carList;
            this.total = data.total;
          }
        });
      },
      // 名称模糊查询
      fullNameSearch() {
        this.resetSearchObj();
        this.selectCondition = {
          curFirstLetter: 'A',
          curCarBrand: -1,
          saveCarBrand: { first: '', name: '' },
          curCarSystem: -1,
          curCarPrice: 0,
          curSort: 0,
        };
        this.$nextTick(() => {
          this.$refs.firstFilterCarBrand.style.height = `${60 + this.$refs.firstLetterList[0].clientHeight}px`;
        });
        this.CarSeriesList = [];
        this.searchObj.carStr.fullName = this.fullName;
      },
      // 分页
      changePageIndex(val) {
        this.searchObj.pageIndex = val;
      },
      // 重置查询条件
      resetSearchObj() {
        this.selectCondition.curCarSystem = -1;
        this.selectCondition.curCarPrice = 0;
        this.searchObj.carStr.fullName = '';
        this.searchObj.carStr.brandName = '';
        this.searchObj.carStr.seriesName = '';
        this.searchObj.carStr.minPrice = 0;
        this.searchObj.carStr.maxPrice = 0;
        this.searchObj.pageIndex = 1;
      },
    },
  };
</script>
<style lang="scss">
#buy {
  border-top: 1px solid #e5e6e6;
  .container {
    width: 12rem;
    margin: 0.2rem auto;
    background: #fff;
    .container-header {
      .breadcrumb {
        .breadcrumb-left {
          .el-breadcrumb {
            line-height: 3;
          }
          .el-breadcrumb__inner {
            color: #999;
          }
        }
        .breadcrumb-right {
          margin-top: 0.05rem;
          .search-input {
            width: 3.5rem;
            margin-left: 1rem;
          }
          .el-input-group__append {
            background: #fff;
            font-size: 0.18rem;
            button:hover {
              color: #ff5400;
            }
          }
        }
      }
      .search-filter {
        margin: 0.1rem 0;
        padding: 0 0.2rem;
        font-size: 0.14rem;
        background-color: #f8f8f8;
        .filter {
          border-bottom: 1px solid #e5e5e5;
          color: #838383;
          line-height: 0.5rem;
          &:first-child {
            line-height: 0.9rem;
            p {
              vertical-align: top;
            }
            .filter-carBrand {
              display: inline-block;
              position: relative;
              li {
                width: 0.3rem;
                padding: 0 0.02rem;
                .first-letter {
                  position: absolute;
                  top: 0.2rem;
                  width: 0.3rem;
                }
                .first-letter-list {
                  position: absolute;
                  display: inline-block;
                  text-align: left;
                  top: 0.58rem;
                  left: 0;
                  span {
                    display: inline-block;
                    padding: 0 0.1rem;
                    &:hover {
                      color: #ff5400;
                    }
                  }
                }
                &:hover {
                  color: #222;
                  .first-letter {
                    color: #ff5400;
                  }
                }
              }
            }
          }
          p {
            display: inline-block;
            width: 0.5rem;
          }
          .filter-carBrand {
            display: inline;
            color: #222;
            li {
              cursor: pointer;
              display: inline-block;
              padding: 0 0.1rem;
              height: 0.3rem;
              line-height: 0.3rem;
              text-align: center;
            }
            li:hover {
              color: #ff5400;
            }
            .cur {
              background: #ff5400;
              color: #fff !important;
            }
          }
        }
        .filter:last-child {
          border-bottom: none;
        }
      }
    }
    .container-body {
      margin-top: 0.2rem;
      .list-sort {
        font-size: 0.14rem;
        margin-bottom: 0.25rem;
        .list-item {
          width: auto;
          line-height: 36px;
          padding: 0 15px;
          border: 1px solid #e5e5e5;
          &:hover {
            cursor: pointer;
            color: #ff5400;
          }
        }
        .cur {
          color: #ff5400;
        }
      }
      .list-body {
        .list {
          margin-bottom: 0.28rem;
          &:hover {
            box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12);
          }
          .list-item {
            cursor: pointer;
            width: 2.8rem;
            height: 2.87rem;
            margin: 0 auto;
            img {
              width: 100%;
              height: 1.89rem;
              border: 1px solid #e9e9e9;
            }
            .t {
              font-size: 0.17rem;
              color: #495056;
              font-weight: 400;
              padding: 5px 0 6px 4px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .t-i {
              color: #a5abb2;
              font-size: 0.14rem;
              padding-left: 4px;
              padding-bottom: 2px;
              .icon-pad {
                display: inline-block;
                font-size: 0.12rem;
                width: 0.14rem;
                text-align: center;
                vertical-align: top;
                line-height: 0.2rem;
              }
            }
            .t-price {
              font-size: 0.19rem;
              color: #f95523;
              padding-left: 4px;
              p {
                float: left;
                line-height: 0.3rem;
              }
              i {
                float: right;
                width: 0.46rem;
                height: 0.21rem;
                line-height: 0.21rem;
                text-align: center;
                font-size: 0.12rem;
                margin: 5px 0 0 5px;
                &.i-orange {
                  color: #ff9650;
                  background: #ffeeda;
                }
                &.i-green {
                  color: #3fc56e;
                  background: #e8f6ed;
                }
                &.i-blue {
                  color: #d7a844;
                  background: #fcf2d5;
                }
              }
              em {
                float: left;
                margin-left: 4px;
                margin-top: 7px;
                color: #a5abb2;
                font-size: 0.14rem;
                &.line-through {
                  text-decoration: line-through;
                }
              }
            }
          }
        }
        .container-footer {
          text-align: center;
          margin: 0.2rem 0;
          .active {
            background-color: #ff9650;
            color: #fff;
          }
          .el-pager li:hover {
            color: #ff9650;
            &.active {
              color: #fff;
            }
          }
        }
      }
      .no-list {
        height: 4rem;
        width: 6rem;
        color: #495056;
        text-align: center;
        border: 2px solid #e6e6e6;
        margin: 0 auto;
        p {
          font-size: 0.24rem;
          margin: 1.5rem 0 0.3rem;
        }
        span {
          font-size: 0.15rem;
        }
      }
    }
  }
}
</style>
